<template>
    <div class="login">
        <div class="login-bg">
            <img src="../../../img/bg.png" alt="">
        </div>
        <div class="form">
            <div class="title">LOGIN</div>
            <el-form ref="form" :rules="rules" :model="form" status-icon>
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请填写管理员账号" prefix-icon="fa fa-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" placeholder="请填写管理员密码" prefix-icon="fa fa-lock"
                              type="password"></el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <el-input v-model.number="form.captcha" placeholder="请填写验证码" prefix-icon="fa fa-image"
                              class="code"></el-input>
                    <img @click="captcha" class="captcha" :src="captchaImg" alt="">
                </el-form-item>
                <div class="refresh"><i class="fa fa-question-circle-o"></i> 看不清，点击验证码换一张</div>
                <el-form-item>
                    <el-button type="primary" class="submit" :loading="button.loading" :disabled="button.disabled"
                               @click="submit">{{ button.text }}
                    </el-button>
                </el-form-item>
                <div class="copyright">
                    Copyright © Powered By Admin System 2022
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>

import {LoginCaptcha, LoginSubmit} from '../../utils/request';

export default {
    data() {
        return {
            captchaImg: '',
            button: {loading: false, disable: false, text: '登 录'},
            form: {
                username: '',
                password: '',
                captcha: '',
                captchaKey: ''
            },
            rules: {
                username: [{required: true, message: '请填写管理员账号', trigger: 'blur'}],
                password: [{required: true, message: '请填写管理员密码', trigger: 'blur'}],
                captcha: [{required: true, message: '请填写验证码', trigger: 'blur'}],
            }
        }
    },
    created() {
        this.captcha();
        this.form = {username: '', password: '', captcha: '', captchaKey: ''};
        this.keyupSubmit();
    },
    methods: {
        captcha () {
            LoginCaptcha().then((res) => {
                if (res.status === 0) {
                    this.captchaImg = res.data.img;
                    this.form.captchaKey = res.data.key;
                }
            })
        },
        keyupSubmit() {
            document.onkeydown = (e) => {
                if (e.keyCode === 13) {
                    this.submit();
                }
            }
        },
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.button.disabled = true;
                    this.button.loading = true;
                    this.button.text = '登录中...';
                    LoginSubmit(this.form).then((res) => {
                        this.button.disabled = false;
                        this.button.loading = false;
                        this.button.text = '登 录';
                        if (res.status) {
                            this.captcha();
                            this.$func.error(res.message);
                        } else {
                            this.$store.dispatch('userLogin', res.data).then(() => {
                                this.$func.success(res.message).then(() => {
                                    this.$router.push({name: 'main'});
                                });
                            });
                        }
                    }).catch((e) => {
                        this.button.disabled = false;
                        this.button.loading = false;
                        this.button.text = '登 录';
                    });
                }
            });
        },
    }
}
</script>
<style scoped>
.login {
    width: 1200px;
    margin: auto;
    height: 560px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
}

.login .form {
    width: 400px;
    height: 480px;
    background-color: #fff;
    padding: 40px 40px;
    border-radius: 3px;
    box-shadow: 0 2px 12px 0 #ccc;
}

.login .form .title {
    line-height: 35px;
    font-size: 32px;
    text-align: left;
    margin-bottom: 35px;
}

.login .form .code {
    width: 200px;
}

.login .form .captcha {
    height: 40px;
    float: right;
    cursor: pointer;
    border-radius: 4px;
}

.login .form .refresh {
    margin-bottom: 15px;
    text-align: right;
    color: #ccc;
    font-size: 12px;
}


.login .form .submit {
    width: 100%;
    font-size: 14px;
}

.login .form .copyright {
    margin-top: 45px;
    font-size: 12px;
    text-align: center;
    color: #A3A3A3;
}
</style>
<style>
body, html {
    font-family: '微软雅黑', 'Open Sans', sans-serif;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    background: #1DC5D8;
}
</style>
